<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryParamsRef"
      :inline="true"
      class="globalSerchFormStyle"
      label-width="68px"
    >
      <el-row>
        <el-col :span="6" v-if="authUser">
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车队名称" prop="fleetName">
            <el-input
              v-model="queryParams.fleetName"
              placeholder="请输入车队名称"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="主卡号" prop="cardNumber">
            <el-input
              v-model="queryParams.cardNumber"
              placeholder="请输入主卡号"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请时间" prop="dateRangeCreatedDate">
            <el-date-picker
              v-model="dateRangeCreatedDate"
              size="small"
              style="width: 190px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="collapse">
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="状态"
              size="small"
              filterable
              clearable
              style="width: 190px"
            >
              <el-option label="待审核" value="1"></el-option>
              <el-option label="审核通过" value="2"></el-option>
              <el-option label="审核不通过" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="resetQuery"
          size="mini"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          id="closeSearchBtn"
          size="mini"
          @click="
            (closeSearch) => {
              collapse = !collapse;
            }
          "
        >
          {{ collapse ? "收起" : "展开更多" }}
          <i :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-delete"
          size="mini"
          plain
          :disabled="currentSelections.length <= 0"
          @click="gotoDelete"
        >
          删除
        </el-button>
      </el-col>
    </el-row>
    <el-table
      :data="auditTableData"
      style="width: 100%"
      @selection-change="handleSelect"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column
        prop="enterpriseName"
        label="油企名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="fleetName"
        label="车队名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="cardNumber"
        label="主卡号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="cardNumberSub"
        label="子卡号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="子卡用户名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="mobilePhone"
        label="手机号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="truckNumber"
        label="车牌号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态"
        width="150"
        show-overflow-tooltip
        :formatter="statusFormatter"
      >
      </el-table-column>

      <el-table-column
        prop="createdTime"
        label="申请时间"
        width="150"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column fixed="right" prop="operation" label="操作" width="230">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleAudit(scope.row, 2)"
            :disabled="scope.row.status === 3 || scope.row.status === 2"
            >审核通过</el-button
          >
          <el-button
            type="text"
            @click="handleAudit(scope.row, 3)"
            :disabled="scope.row.status === 3 || scope.row.status === 2"
            >审核不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 弹框 -->
    <el-dialog
      title="子卡审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>{{ operationText }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量删除 -->
    <el-dialog
      title="删除子卡"
      :visible.sync="patchDelDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>确定删除所选子卡吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="patchDelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="patchDeleteSonCard">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { enterpriseList } from "@/api/station/order";
import {
  getSonCardListApi,
  setSonCardStatusApi,
  patchDeleteSonCardApi,
} from "@/api/teamCard/sonCard";
export default {
  name: "TeamCardAudit",
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dateRangeCreatedDate: [],
      enterpriseList: [],
      auditTableData: [],
      collapse: false,
      operationText: "通过该子卡的审核",
      dialogVisible: false, // 审核谈款
      patchDelDialogVisible: false, //批量删除弹框
      currentSonCardInfo: {
        id: "",
        status: "",
      },
      currentSelections: [],
    };
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.getList();
    this.getEnterpriseList();
  },
  methods: {
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },

    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置表单
    resetQuery() {
      this.resetForm("queryParamsRef");
      this.dateRangeCreatedDate = [];
      this.getList();
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false;
      this.patchDelDialogVisible = false;
    },

    // 获取列表
    getList() {
      const params = { ...this.queryParams };
      if (this.dateRangeCreatedDate && this.dateRangeCreatedDate.length) {
        params.beginTime = this.dateRangeCreatedDate[0];
        params.endTime = this.dateRangeCreatedDate[1];
      }
      getSonCardListApi(params).then((res) => {
        this.auditTableData = res.rows;
        this.total = res.total;
      });
    },
    // 审核状态格式化
    statusFormatter(row, column) {
      const types = {
        1: "待审核",
        2: "审核通过",
        3: "审核不通过",
      };
      return types[row.status];
    },

    // 审核操作按钮
    handleAudit(row, status) {
      // 2  审核通过 3 审核不通过
      if (status === 2) {
        this.operationText = "通过该子卡的审核";
      }
      if (status === 3) {
        this.operationText = "驳回该子卡的审核";
      }
      // 更新即将审核需要的参数值以及状态
      this.currentSonCardInfo.id = row.id;
      this.currentSonCardInfo.status = status;
      this.dialogVisible = true;
    },

    // 确定提交 审核
    handleSubmit() {
      const params = this.currentSonCardInfo;
      setSonCardStatusApi(params).then((res) => {
        this.msgSuccess("操作成功");
        this.dialogVisible = false;
        this.getList();
      });
    },

    // 选中行
    handleSelect(rows) {
      this.currentSelections = rows;
    },

    gotoDelete() {
      let isHasWating = this.currentSelections.some(
        (item) => item.status === 1
      );
      if (isHasWating) {
        this.$message.warning("所选记录中，存在待审核记录，请先处理");
      } else {
        this.patchDelDialogVisible = true;
      }
    },

    // 批量删除子卡
    patchDeleteSonCard() {
      let ids = this.currentSelections.map((item) => item.id).join(",");
      patchDeleteSonCardApi(ids).then((res) => {
        this.msgSuccess("删除成功");
        this.patchDelDialogVisible = false;
        this.getList();
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
